<template>
  <ele-card :body-style="{ paddingBottom: '2px' }">
    <el-form label-width="72px" @keyup.enter="search">
      <el-row :gutter="8">
        <el-col :lg="4" :md="12" :sm="12" :xs="24">
          <el-form-item label="姓名">
            <el-input
              clearable
              v-model.trim="form.name"
              placeholder="请输入学生姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24">
          <el-form-item label="学号">
            <el-input
              clearable
              v-model.trim="form.code"
              placeholder="请输入学生学号"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24">
          <el-form-item label="学生填写">
            <el-select clearable v-model="form.studentRecommendSubmit" placeholder="请选择推荐表信息提交状态">
              <el-option label="已提交" value="0"></el-option>
              <el-option label="未提交" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24">
          <el-form-item label="审核状态">
            <el-select clearable v-model="form.counselorRecommendCheck" placeholder="请选择推荐表锁定状态">
              <el-option label="已审核" value="0"></el-option>
              <el-option label="未审核" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="毕业年份">
            <dict-data
              code="graduation_year"
              v-model="form.graduationYear"
              placeholder="请选择毕业年份"
              multiple
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="身份证">
            <el-input
              clearable
              v-model.trim="form.idNumber"
              placeholder="请输入学生身份证号"
            />
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="校区">
            <dict-data
              code="campus"
              v-model="form.campus"
              placeholder="请选择学生所属校区"
              multiple
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="年级">
            <el-select
              v-model="form.grade"
              multiple
              collapse-tags
              clearable
              style="width: 100%;"
              placeholder="请选择学生年级">
              <el-option
                v-for="item in gradeOptions"
                :key="item.value"
                :label="item.label+'年'"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="系别">
            <el-select
              v-model="form.department"
              multiple
              collapse-tags
              clearable
              filterable
              style="width: 100%;"
              placeholder="请选择系别">
              <el-option
                v-for="item in departmentOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="专业">
            <el-select
              v-model="form.major"
              multiple
              collapse-tags
              clearable
              filterable
              style="width: 100%;"
              class="autoWidth-select"
              placeholder="请选择专业">
              <el-option
                v-for="item in majorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="学制">
            <dict-data
              code="study_time"
              v-model="form.studyTime"
              placeholder="请选择学生学制"
              multiple
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="班号">
            <dict-data
              code="class_num"
              v-model="form.classNum"
              placeholder="请选择校学生所属班号"
              multiple
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="学籍">
            <dict-data
              code="study_state"
              v-model="form.studyState"
              placeholder="请选择校区学籍状态"
              multiple
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="辅导员">
            <el-select
              v-model="form.userCode"
              multiple
              collapse-tags
              clearable
              filterable
              style="width: 100%;"
              placeholder="请选择辅导员">
              <el-option
                v-for="item in userOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #999; font-size: 13px">{{ item.ext }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :lg="4" :md="12" :sm="12" :xs="24" v-show="showOrHidSearchParams">
          <el-form-item label="总支">
            <dict-data
              code="organization"
              v-model="form.organization"
              placeholder="请选择校学生所属党总支"
              multiple
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="12" :sm="12" :xs="24">
          <el-form-item label-width="16px">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
            &nbsp;&nbsp;<el-link @click="showOrHidSearchParams=!showOrHidSearchParams" :underline="false" type="success"
                                 class="showOrHid"
                                 :icon="showOrHidSearchParams?'el-icon-arrow-up':'el-icon-arrow-down'">
            显隐选项
          </el-link>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ele-card>
</template>

<script setup>
import {useFormData} from '@/utils/use-form-data.js';
import {ref} from "vue";
import {getGrade, getDepartment, getMajor, getUser} from '@/api/manage/student/admin/common.js';
import {getConfigKey} from '@/api/system/config/index.js'

const emit = defineEmits(['search']);
const showOrHidSearchParams = ref(false);

const gradeOptions = ref([]);
const departmentOptions = ref([]);
const majorOptions = ref([]);
const userOptions = ref([]);


/** 表单数据 */
const [form, resetFields] = useFormData({
  name: '',
  code: '',
  idNumber: '',
  campus: [],
  grade: [],
  department: [],
  major: [],
  studyTime: [],
  classNum: '',
  studyState: [],
  userCode: [],
  graduationYear: [],
  organization: [],
  studentRecommendSubmit: '',
  counselorRecommendCheck: '',
});

/** 搜索 */
const search = () => {
  emit('search', {...form});
};

/**  重置 */
const reset = () => {
  resetFields();
  form.graduationYear.push(currentYear.value);//重置时重新绑定当前毕业年份
  search();
};


const initGrade = () => {
  // let _this = this;
  getGrade().then(response => {
    gradeOptions.value = response.data;
  });
}

const initDepartment = () => {
  getDepartment().then(response => {
    departmentOptions.value = response.data;
  });
}

const initMajor = () => {
  getMajor().then(response => {
    majorOptions.value = response.data;
  });
}

const initUser = () => {
  getUser().then(response => {
    userOptions.value = response.data;
  });
}


/**
 * 获取当前毕业年份
 */
const currentYear = ref('');
const getCurrentGraduationYear = () => {
  getConfigKey("current.graduation.year").then(response => {
    currentYear.value = response.msg;
    form.graduationYear.push(response.msg);
    search();
  });
}


initGrade();
initDepartment();
initMajor();
initUser();
getCurrentGraduationYear();
</script>
